<!--
 Copyright 2025 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

<div class="parent-container">
  <div class="wrapping-container">
    <div class="main-div">
      <div class="sub-heading">
        <div class="name-container">
          Hey, {{savedUser.name ? savedUser.name!.split(" ")[0]+'!' : ''}}
        </div>
        <div class="helper-container">How can I help you today?</div>
      </div>
    </div>

    <div class="chat-footer-outer">
      <div class="chat-footer">
        <div class="chat-textarea">
          <mat-chip-grid class="intent-chip-textarea" [ngClass]="this.intentSelected ? 'intent-chip': 'category-chip'"
            style="width: 100%;" #chipGrid aria-label="Enter intent">
            <input [matChipInputFor]="chipGrid"
              placeholder="Type your question here and start your journey! 🚀🚀🚀"
              [(ngModel)]="chatQuery" (keydown.enter)="navigate()" />
          </mat-chip-grid>
        </div>
        <div class="micIcon">
          <button mat-icon-button (click)="startRecording()" matTooltip="Record"
            *ngIf="!isRecording"><mat-icon>mic_none</mat-icon>
          </button>
          <span class="recording-container" *ngIf="isRecording">
            <span class="blue-dot">&nbsp;</span>
            <span class="green-dot">&nbsp;</span>
            <span class="yellow-dot">&nbsp;</span>
            <button (click)="stopRecording()" style="color: red;" class="reset-button initial" mat-icon-button
              matTooltip="Stop Recording" aria-label="record button">
              <mat-icon class="material-icons-outlined">stop_circle</mat-icon>
            </button>
          </span>
          <button mat-icon-button (click)="navigate()">
            <mat-icon>send</mat-icon>
          </button>
        </div>
      </div>
    </div>

    <!-- TODO: Enable dynamic intents for the user to choose -->
    <!-- <div *ngIf="this.intents" class="container main-div margin-div journey-chips">
      <div class="cards-outer-container">
        <div class="cards-container"
            [ngClass]="this.intents.length >= 5 ? 'cards-container-all-categories':'cards-container-few-categories'">
          <div
            class="intent-container-box {{intent.name}}"
            id="{{intent.name}}"
            (click)="expandIntentContainer(intent)"
            *ngFor="let intent of this.intents">
            <div class="card-detail-container">
              <div class="card-heading">
                {{this.getHumanReadablestring(intent.name)}}
              </div>
              <div class="{{intent.name}}_close_button_container close-button-container">
                <button mat-icon-button class="close-button">
                  <mat-icon class="close-icon">close</mat-icon>
                </button>
              </div>
            </div>
            <div *ngIf="this.chipSelected != intent.name" class="card-content">{{intent.description}}
            </div>
            <div class="suggested-question-container {{intent.name}}_suggested_questions_container">
              <div *ngFor="let question of intent.questions.slice(0,4)">
                <mat-chip-row class="suggested-question-chip-row" [highlighted]="this.chipSelected == question" (click)="assignQToChatQuery(question)">
                  <span class="suggested-question-chip">
                    <mat-icon class="suggested-question-icon">chat</mat-icon>
                    <span class="suggested-question-text">{{question}}</span>
                  </span>
                </mat-chip-row>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
